Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента

[Lockpickup]

Господа, подскажите как корректно (!) определить высоту элемента (в данном случае <DIV id="displayer_type">) в который загружаются данные через XMLHttpRequest.

Итак:
1. Изначально элемент <DIV id="displayer_type"> пуст.
2. Непосредственно загрузка данных (используется mootools)

function processReqChange(){
  var ready=request_obj.readyState;
  if (ready==4){
	  clearTimeout(timeout);
	  if (request_obj.status == 200) {//все ОК, показываем новый элемент с данными от сервака
		$(displayer_type).innerHTML=request_obj.responseText;
		
                      /***********************************
		ОТОБРАЗИТЬ ОСНОВНОЕ СОДЕРЖИМОЕ СТАТЬИ*/
		var my_Hidder =$(eval(displayer_type+'_hidder'));
		my_Hidder.setStyle('visibility', 'visible');
		my_Hidder.set('tween', {transition: myTransition.easeOut});
		my_Hidder.tween('height',  $(displayer_type).clientHeight+10);
		/***********************************/
	  }
	  else {
		  ErrHandler(1);
		  $(displayer_type).innerHTML="<B>Невозможно найти страницу.</B><BR>Возможно, эта страница была удалена, переименована, или она временно недоступна.";
		  }
	}
  else{
		$(displayer_type).innerHTML="<CENTER>Загрузка...<BR><IMG SRC="+preload_img+" BORDER=0></CENTER>";
  }}

3. Скрипт PHP к которому обращается XMLHttpRequest возвращает HTML таблицу с рисунками.
4. Цель поставить значение высоты элемента my_Hidder равным значению высоты, того элемента, куда производилась загрузка данных от скрипта PHP (my_Hidder.tween('height', $(displayer_type).clientHeight+10)

После загрузки свойство clientHeight элемента displayer_type далеко не всегда оказывается равным высоте таблице, переданной PHP скриптом.

Причем эта ошибка не носит систематического характера. То все ОК, то значение my_Hidder не устанавливается в соответствие со значением $(displayer_type).clientHeight+10

[poorking]

Попробуйте getComputedStyle/currentStyle
http://javascript.ru/blog/Andrej-Par...tcomputedstyle

[Lockpickup]

Увы!

В стилях задано: height: 1px;
После загрузки заднных в элемент свойство getComputedStyle/currentStyle упорно продолжает возвращать 1px. Тогда как clientHeight возвращает не 1px.

[poorking]

. Цель поставить значение высоты элемента my_Hidder равным значению высоты, того элемента, куда производилась загрузка данных от скрипта PHP (my_Hidder.tween('height', $(displayer_type).clientHeight+10)

Так если у вас размеры родителя известны и фиксированы, задайте же загружаемому блоку высоту 100%

[Lockpickup]

poorking, не отчень понял Ваш совет. Поэтому попытался еще раз, но, надеюсь, понагляднее описать ситуацию.

<DIV class="ArticleHidder" id="_001_hidder">Это тот, элемент, высоту которого пытаюсь изменить в сиитвествии с высотой элемента id="_001"
	<DIV id="_001" class="ArticleContent"></DIV>А в этот элемент гружу данные от PHP  скрипта.
</DIV>

В исходных стилях для id="_001_hidder" определено height: 1px; и overflow: hidden; Таким образом скрываются данные (если они есть в элементе id="_001").
По какому-нибудь событию определяем высоту id="_001_hidder". Если она <=1 то в элемнт id="_001" загружаем данные и определяем его высоту. Затем ставится _001_hidder.высота=_001.высота. Иногда (!) получатся так, что не все загруженные загруженные в id="_001" данные полностью отображаются.

[poorking]

Если она <=1 то в элемнт id="_001" загружаем данные

То есть вы определяете, загружены ли данные в блок и нужно ли загружать по его высоте?
Это мне напомнило как кто то определял тип обработчика для ячейки таблицы по ее цвету.

По какому-нибудь событию определяем высоту id="_001_hidder".

Вы не поняли что я сказал, потому что я до сих пор не понял что вам нужно. С одной стороны, вы хотите скрывать данные внутри id 001_hidder

определено height: 1px; и overflow: hidden; Таким образом скрываются данные (если они есть в элементе id="_001").

, с другой стороны вы хотите при загрузке внутрь id 001 изменить высоту его родителя под него

Если она <=1 то в элемнт id="_001" загружаем данные и определяем его высоту. Затем ставится _001_hidder.высота=_001.высота.

Какая то логическая нестыковка. Мне кажется кое что можно сократить) То есть если в блоке ничего нет, то его высота и так равна 0, разве нет? А если есть, то его высота растянется под высоту контента. Может просто не надо задавать Height = 1px?

В телепатии я совсем плох, но попробую. Возможно у вас есть элемент управления, который скрывает/отображает блок 001_hidder, тогда меняйте не высоту, a display:none|block. И не нужно каждый раз при отображении элемента снова загружать данные, если конечно там не совсем_динамический_контен т

Если я снова нигде не угадал, значит вам нужно еще подробнее объяснить, хотя может это я такой неодупляемый

[poorking]

Но даже если вдруг что, если хотите чтобы высота стала снова резиновой просто установите elem.style.height = ""

<script type = "text/javascript">
window.onload = function(){
	function tog(elem){
		if(elem.style.height == "1px"){
			elem.style.height = "";
		}else{
			elem.style.height = "1px";
		}
	}
	
	document.getElementById("tog").onclick = function(){
		tog(document.getElementById("text"));
	}
}
</script>
<style type = "text/css">
		#text{
			overflow: hidden;
			
		}
</style>
<button id = "tog">toggle</button>
<div id = "text">
123123123<br />
123123123<br />
123123123<br />
123123123<br />
123123123<br />
</div>

Тут я возвращаю норм высоту, не узнавая высоты контента

[Lockpickup]

Вот что получается по частям:
1. По какому-нибудь событию определяем есть ли данные в элементе id="_001". Если они есть то что-то делаем - в данном контексет не принципиально что.
2. Если данных нет то нужно их загрузить. С этим все ок.
3. После загрузки, данные надо отобразить. Это можно слеать различными путями. Например, так как показали Вы в последнем посте. Или изначально поставить id="_001" свойство display: hidden; а потом, послезагрузки свойство display в значение block...
Но у меня ситуация такова, что данные надо не просто отобразить, а еще и сделать это"эффектно."
Для этого я использую tween

my_Hidder.set('tween', {transition: myTransition.easeOut}); 
13	        my_Hidder.tween('height',  $(displayer_type).clientHeight+10)

из Mootools о чем я писал в самом начале.
А вот чтобы работала анимация по высоте, приходится задавать натуральное целевое значение высоты элемента. Т.е. появление структуры

<DIV class="ArticleHidder" id="_001_hidder">Это тот, элемент, высоту которого пытаюсь изменить в сиитвествии с высотой элемента id="_001" 
    <DIV id="_001" class="ArticleContent"></DIV>А в этот элемент гружу данные от PHP  скрипта. 
</DIV>

и прочий, извиняюсь, геморрой, вызваны только этой самой анимацией.

Предположим, я изначально поставил id="_001" свойство display: hidden. Затем я загрузил в него данные. Теперь я должен запустить анимацию до некоторого целевого значения X. Но поскольку у id="_001" свойство display: hidden то его высота (т.е. целевое значение анимации) = 0.
А если я после загрузки данных буду отображать элемент id="_001" через display то никакой анимации не получается (точнее получится, но с дерганием анимируемого элемента). Именно поэтому я "прятал" id="_001" внутри id="_001_hidder" со свойством overflow: hidden;.
Быть может, задачу можно в принципе решить иначе, но я пока не придумал как.

[poorking]

Теперь гораздо понятнее. Я просто не знаком с MooTools, поэтому не догадался что такое tween. computedStyle не подойдет, потому что он заработает только если измеряемый объект уже на странице. Тогда надо так.

Физические параметры внешнего контейнера не трогаете.

1. Происходит событие, вызывается обработчик.
2. Обработчик проверяет есть ли данные внутри того блока, в который надо загрузить. Если надо загрузить то собираете то что надо загрузить (responseText очевидно).

Тут возникает проблема. Мы не знаем размер внешнего блока, и внутреннего тоже. Тогда вы пошли по правильному пути наверно сначала. Надо сделать высоту внешнего 0, затем загрузить туда Ответ, затем измерить высоту ответа с помощью computed Style (надо нарисовать, иначе не сработает), затем сбросить высоту внешнего блока elem.style.height = "", затем внутренний блок проанимировать (высоту мы уже знаем), но тут тоже есть одно но. Фирменный для IE currentStyle не посчитает в пикселях высоту если она не была задана в CSS, он скажет auto, так что в IE Это работать не будет. Хотя с ClientHeight Наверно получится, суть в том что надо сначала поместить -> измерить - > проанимировать до измеренного (возможно предварительно удалив)

Как еще высоту контента узнать, не знаю. Может у вас однотипный блоковый контент например, и высоту блока всегда одна, можно вручную посчитать как вариант, потом делать высоту в зависимости от кол-ва блоков.

А лучше вообще не анимировать высоту )) Я конечно зануда, но "ездящие" сайты не очень нравятся, я б прозрачность плавно нагнал, а высота пусть мгновенно появляется))

[poorking]

<!DOCTYPE html>
<meta charset = "utf-8" />
<script type = "text/javascript">


window.onload = function(){
	
	
	var inner = document.createElement("DIV");
	inner.id = "inner";
	inner.innerHTML = "123123123<br />123123123<br />123123123<br />123123123<br />";
	
	
	document.getElementById("put").onclick = function(){
		var outer = document.getElementById("outer"); 
		outer.appendChild(inner);
		
		var maxh = inner.clientHeight, h = 0;
		
		(function(){
			inner.style.height = h + "px";
			
			if(h ++ < maxh){
				window.setTimeout(arguments.callee, 5);
			}	
		}())
	}
}
</script>
<style type = "text/css">
	
	#inner{
		overflow:hidden;
	}
	#outer{
		border:1px solid green;
	}
		
</style>
<button id = "put">put!</button>

<div id = "outer" class = "closed"></div>